<template>
    <div class=" ">
        <box title="设备统计">
            <div :class="storeType == 1 ? 'h-[208px] ' : 'h-[208px] '" class="pt-[40px]  px-[16px] pb-[38px]">
                <SeamlessScroll v-if="countAllList.length != 0" ref="scroll" :data="countAllList"
                    :class="storeType == 1 ? 'warp' : 'warp2'" class="" :class-option="classOption">
                    <div class=" grid  grid-cols-2 w-full">
                        <div class="" v-for="(item, index) in countAllList" :key="index">
                            <div class="flex mb-[42px]  ">
                                <div class="w-[44px] h-[44px] mr-[16px]">
                                    <!-- <img v-img-error="item.productIcon" class="!w-[44px] !h-[44px]"
                                        :src="item.productIcon">
                                    </img> -->
                                    <el-image class="h-[44px] w-[44px]" :lazy="false" fit="scale-down"
                                        :src="item.productIcon" >
                                        <template #error>
                                            <img src="@/assets/screenimg/null.png" />
                                        </template>
                                    </el-image>
                                </div>
                                <div class="flex flex-col justify-around w-[100px]">
                                    <div  class=" text-[14px] text-[#A7D6D9] font-normal line-clamp-1 ">
                                        {{ isNullOrEmpty(item.name) }}
                                    </div>
                                    <div class="text-[16px] text-[#fff] font-medium">
                                        <div v-if="item.value <= 999"> {{ isNullOrEmpty(item.value) }}<span
                                                class="text-[12px]">个 </span></div>
                                        <div v-else>999+</div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </SeamlessScroll>

                <nullpng v-else />
            </div>
        </box>
    </div>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import { ref, reactive, unref } from "vue";
import SeamlessScroll from "@/components/ReSeamlessScroll";
import box from '@/views/large-data-screen/component/box.vue'
import { screendevice } from '@/api/screen/largeData'
import { useDataDashboardThemeStore } from '@/store/modules/data-dashboard-theme'
const storeType = useDataDashboardThemeStore().dataDashboardType
const systematicId = ref()
const classOption = reactive({
    direction: "top"
});
function changeDirection(val) {
    // (unref(scroll) as any).reset();
    unref(classOption).direction = val;
}
const all = ref()
const countAllList = ref([])
onMounted(() => { })
watch(() => useDataDashboardThemeStore().GET_SETTING('systematicId'), () => {

    // setTimeout(() => {
    setTimeout(() => {
        systematicId.value = useDataDashboardThemeStore().GET_SETTING('systematicId')
        all.value = useDataDashboardThemeStore().GET_SETTING('all')
        getscreendevice()
    }, 100)

    // }, 100)
    setTimeout(() => {
        changeDirection('top')
    }, 500)

}, { immediate: true })
//设备统计

const getscreendevice = () => {

    screendevice({
        systematicId: systematicId.value, //系统id
        all: all.value
    }).then(res => {
        console.log("获取设备统计", res);
        countAllList.value = res.result
    })
}
</script>
<style scoped lang="scss">
.warp {
    width: 100%;
    height: 130px;
    overflow: hidden;
}

.warp2 {
    width: 100%;
    height: 130px;
    overflow: hidden;
}
</style>
